<template>
  <div class="home">
    <van-pull-refresh @refresh="submit">
      <div
        v-for="(item, i) in comm_list"
        :key="i"
        @click="message_list(item)"
        class="user_comm_contacts"
      >
        <img :src="item.shops_avatar_url" class="comm_user_avatar_url" />
        <div class="comm_user_desc">
          <div class="van-ellipsis">
            {{ item.shops_name }}
          </div>
          <div class="comm_user_message">
            {{ item.nickname }}&ensp;
            {{ item.message }}
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {

      comm_list: [],
    };
  },
  created(){
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "chat/comm/", "get", {
        user_id: localStorage.getItem('id'),
        user_type: localStorage.getItem('user_type')
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.comm_list = data.data;
            for (let i in this.comm_list){
                let chat_message = localStorage.getItem('chat_' + this.comm_list[i].id)
                if (chat_message){
                    chat_message = JSON.parse(chat_message)
                    this.comm_list[i]["nickname"] = chat_message[chat_message.length -1].nickname;
                this.comm_list[i]["message"] = chat_message[chat_message.length -1].content;
                }
            }
            console.log('列表',this.comm_list)
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
     // 聊天
    message_list(item){
      console.log(item)
      let date = {
        chat_id: item.id,
        chat_name: item.shops_name,
      }
      alert(date)
      this.$router.push({path: "/chat", query:date})
    }
  },
};
</script>

<style>
.user_comm_contacts{
  margin-bottom: 1vw;
  width: calc(100% - 4vw);
  height: 15vw;
  padding: 2vw;
  background-color: white;
  border-radius: 1vw;
}
.user_comm_contacts:active{
  background-color: #f2f3f5;
}
.comm_user_avatar_url{
  float: left;
  width: 15vw;
  height: 15vw;
  border-radius: 1vw;
}
.comm_user_desc{
  float: left;
  width: calc(100% - 21vw);
  height: 13vw;
  padding: 2vw;
  font-size: 5vw;
}
.comm_user_message{
  padding-top: 2vw;
  color: #969799;
  line-height: 6vw;
  font-size: 4vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>